.Synths-ChartTokenSelector {
  .chart-token-selector {
    border: none;
    background: transparent;
    color: var(--color-white);
    font-size: 2rem;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    border-radius: var(--border-radius-sm);

    &:hover {
      color: var(--color-blue-300);
      span {
        color: var(--color-blue-300);
      }
    }
  }

  @media (max-width: 380px) {
    .chart-token-selector {
      font-size: 1.6rem;
    }
  }

  .chart-token-label--active {
    color: var(--color-blue-300);
    span {
      color: var(--color-blue-300);
    }
  }

  .chart-token-selector--current {
    font-weight: 700;
    margin-right: 1rem;
    color: var(--color-white);
    vertical-align: bottom;

    .chart-token-current-icon {
      margin-right: 0.75rem;
    }
  }

  .chart-token-menu-items.menu-items {
    max-width: 45rem;
    top: 6.8rem;
    right: unset;
    left: 0;
    cursor: auto;
  }

  @media (max-width: 1100px) {
    .chart-token-menu-items.menu-items {
      top: 5.05rem;
    }
  }

  .chart-token-menu-items.menu-items.isSwap {
    max-width: 22rem;
  }

  .chart-token-menu-items .menu-item {
    font-size: var(--font-sm);
    height: 3.4rem;
    color: var(--color-slate-100);
  }

  .chart-token-list {
    overflow-x: auto;
    $header-height: 32.5px;
    $row-height: 34.5px;
    $rows-to-show: 10;
    max-height: $header-height + $row-height * $rows-to-show;
    padding-bottom: 1rem;

    table {
      width: 100%;
      text-align: left;
      font-size: var(--font-sm);
      border-collapse: collapse;
    }
    thead {
      display: table-header-group;
      position: sticky;
      top: 0;
      background: var(--color-slate-800);
      tr {
        th {
          padding: 0.75rem 1.5rem;
          font-weight: normal;
          letter-spacing: 0.25px;
          color: var(--color-gray-400);
          text-transform: uppercase;
        }
      }
    }

    tbody {
      .Swap-token-list {
        background-color: var(--dark-blue-bg);
        border-radius: var(--border-radius-sm);
        cursor: pointer;
        &:hover {
          background-color: var(--dark-blue-hover);
          border-radius: var(--border-radius-sm);
        }
        td {
          padding: 0.75rem 1.5rem;
          white-space: nowrap;
          font-weight: 400;

          &.token-item {
            color: var(--color-slate-100);

            .ChartToken-list-icon {
              margin-right: 0.75rem;
            }
          }
        }
      }
      .Position-token-list {
        background-color: var(--dark-blue-bg);
        border-radius: var(--border-radius-sm);
        td {
          padding: 0.75rem 1.5rem;
          white-space: nowrap;
          font-weight: 400;
          cursor: pointer;

          &:hover {
            background-color: var(--dark-blue-hover);
          }

          &.token-item {
            color: var(--color-slate-100);

            .ChartToken-list-icon {
              margin-right: 0.75rem;
            }
          }
        }
      }
    }
  }
}
